<template>
  <div>
    <div class="flexContainer">
      <div class="flexItem" v-for="(item, index) in goods" :key="item[propsName.indexName ? propsName.indexName : index]" @click="toGoodsInfo(item[propsName.goodsId])">
        <el-card :body-style="body" shadow="hover">
          <img :src="item[propsName.coverName] || emptyImg" />
          <span title>{{item[propsName.titleName]}}</span>
          <span publisher>发布者: {{item[propsName.pulisherName]}}</span>
        </el-card>
      </div>
    </div>
    <el-empty description="没有找到相关商品" v-show="goods.length === 0"></el-empty>
  </div>
</template>

<script>

export default {
  data() {
    return {
      emptyImg: require('@/assets/empty.jpg'),
      currentDate: new Date(),
      body: {
        padding: '0px'
      },
      defaultPropsName: {
        indexName: undefined,
        goodsId: 'id',
        coverName: 'cover',
        titleName: 'title',
        pulisherName: 'publisher'
      }
    }
  },
  methods: {
    toGoodsInfo(id) {
      this.$router.push({
           path: '/goodsInfo',
           query:{
             id: id
           }
      })
    }
  },
  computed: {
    propsName() {
      return { ...this.defaultPropsName, ...this.props }
    }
  },
  props: {
    // 商品信息各字段的名称
    props: {
      type: Object,
      required: false
    },
    goods: {
      type: Array,
      default() {
        return []
      },
      required: false
    }
  },
  mounted() {
    // console.log(this.propsName)
    // console.log(this.propsName.goodsId)
    console.log(this.goods)
    //let result = goodsSummaryApi.reqGoodsSummary()
    //console.log(result)
  }
}
</script>

<style lang="less" scoped>
.flexContainer {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  .flexItem {
    width: 20%;
    height: 300px;
    margin: 15px;
    text-align: center;
    overflow: hidden;
    .el-card {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: #F2F2F2;
      img {
        max-width: 70%;
        margin: 0 auto;
        display: block;
      }
      span {
        display: block;
        line-height: 100%;
        margin-top: 20px;
        font-size: 17px;
        font-weight: bolder;
      }
      span[publisher] {
        font-size: 12px;
        font-weight: normal;
      }
    }
  }
}
</style>
